<!--  -->
<template>
  <div class="login">
      <!-- <HeaderTop title="绑定手机号"></HeaderTop> -->
      <form class="login-wrapper">
        <section class="login_message">
          <input type="tel" maxlength="11" placeholder="输入手机号" class="tel" v-model="phone">
          <button class="get_verification" :class="{btn:isGray==true}" @click.prevent="getCode">{{computeTime > 0 ? `已发送(${computeTime}s)` : '获取验证码'}}</button>
        </section>
        <section class="login_verification">
          <input type="tel" maxlength="8" placeholder="填写验证码" class="veri" v-model="sms">
        </section>
        <section class="login_password">
          <input type="text" class="pw" placeholder="邀请码非必填" v-model="invitationCode">
        </section>
        <button class="login_submit" @click.prevent="wxLogin">确定</button>
      </form>
  </div>
</template>

<script>
// import HeaderTop from '../HeaderTop/HeaderTop'
export default {
  data () {
    return {
      openId:'',
      access_token:'',
      phone:'',
      sms:'',
      invitationCode:'',
      computeTime:0, //倒计时时间
      isGray:false,
    };
  },
  mounted(){
    this.openId = localStorage.getItem('openId')
    this.access_token = localStorage.getItem('access_token')
    console.log('this.openId',this.openId)
    console.log('this.access_token',this.access_token)
  },
  // components: {
  //   HeaderTop
  // },
  computed: {},

  methods: {
    // 异步发送验证码
    async getCode(){
      if(!this.phone){
        this.$toast('请输入手机号');
        // this.$dialog.alert({
        //   message: '请输入手机号'
        // })
      }else{
        if(!this.computeTime){ //倒计时不是0 才能倒计时
        this.computeTime = 120
        this.isGray = true
        this.IntervalId = setInterval(()=>{
          this.computeTime --
          if(this.computeTime <= 0){
            clearInterval(this.IntervalId)
            this.isGray = false
          }
        },1000)
        // 发送ajax请求（向手机发送验证码短信）
        const result = await this.API.reqSendCode(this.phone)
        console.log(result)
        if(result.retCode !== '000'){
          this.$toast(result.retMsg);
          // this.$dialog.alert({
          //   message: result.retMsg
          // })
          // 停止倒计时
          if(this.computeTime){
            this.computeTime = 0
            clearInterval(this.IntervalId)
            this.IntervalId = undefined
          }
        }
      }
      }
    },
    async wxLogin(){
      // console.log(this.phone,this.sms,this.invitationCode)
      if(!this.phone){
        // 输入手机号
        this.$toast('输入手机号');
        // this.$dialog.alert({
        //   message: '输入手机号'
        // })
        return 
      }
      if(!this.sms){
        // 输入密码
        this.$toast('输入验证码');
        // this.$dialog.alert({
        //   message: '输入验证码'
        // })
        return
      }
      const {openId,sms,access_token,phone,invitationCode} = this
      console.log(openId,sms,access_token,phone,invitationCode)
      const result = await this.API.reqWXRegister({phone,sms,openId,access_token,invitationCode})
      console.log('第一次微信绑定手机',result)
      if(result.retCode === '000'){
        const userInfo = result.retData
        console.log('result.retData',result.retData)
        console.log('对象userInfo',userInfo)
        console.log('对象userInfo.userInfo',userInfo.userInfo)
        this.$store.dispatch('recordUserInfo',userInfo)
        localStorage.setItem('userId', userInfo.userInfo.id)
        localStorage.setItem('token',userInfo.token)
        localStorage.setItem('userInfo',JSON.stringify(userInfo))
        // this.$router.replace('/msite')
        this.$router.replace('/msite')
      }else{
        this.$toast(result.retMsg);
        // this.$dialog.alert({
        //   message: result.retMsg
        // })
      }
    }
  }
}

</script>
<style lang='stylus' scoped>
@import "../../common/stylus/mixins.styl"
.login
  padding-bottom 0 !important
  width 100%
  height 100%
  background #fff
  overflow hidden
  .login-wrapper
    width 100%
    height 100%
    top-border-1px(#e4e4e4)
    display flex
    align-items center
    flex-direction column
    padding-top 25px
    button 
      padding 0
      margin 0
      border:1px solid transparent
      outline none
    section
      border 1px solid #e4e4e4
      width 305px
      border-radius 100px
      overflow hidden
      height 47px
      margin-bottom 16px
      input 
        background-repeat no-repeat
        background-size 26px 28px
        background-position 15px 10px
        height 47px
        padding-left 50px
        line-height 47px
        font-size 14px
        &.tel
          background-image url(../../assets/img/tell.png)
        &.veri
          background-image url(../../assets/img/num.png)
        &.pw
          background-image url(../../assets/img/mima.png)
    .login_submit
      border 1px solid #e4e4e4
      width 305px
      border-radius 100px
      height 47px
      background #145B3E
      color #fff
    .login_message
      position relative
      .get_verification
        position absolute
        right 0
        background #145B3E
        width 80px
        height 47px
        font-size 12px
        color #fff
</style>